<template>
<div class="box">
    <!-- 当这个插槽有值再显示 -->
    <div class="box-img" v-if="$slots.lt">
        <slot name="lt"></slot>
    </div>
    <h1>电影的名字</h1>
    <!-- 默认插槽 这里显示什么内容 由父组件决定 -->
    <!-- 加了name 有具体的名字 具名插槽 -->
    <slot name="cb" :vdieoList="videoList"></slot>
</div>
</template>
<script>
export default{
    name: "aiqiyi_item",
    props:{
        videoId:{
            type:Number
        }
    },
    mounted(){
        console.log(this.videoId);
        //模拟发送请求通过id获取对应的视频列表
        this.videoList = [
            {id:1,name:"第一部"},
            {id:2,name:"第二部"},
            {id:3,name:"第三部"},
            {id:4,name:"第四部"},
            {id:5,name:"第五部"},
        ]
    },
    data(){
        return {
            videoList:[]
        }
    }
}
</script>
<style scoped>
.box{
    width: 300px;
    height: 650px;
    background-color: bisque;
}
.box-img{
    width: 300px;
    height: 400px;
    background-color: aquamarine;
}
</style>